<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class=" p-3">
		<view class="card">
			<view class="card_item flex content-center">
				<view class="left">
					姓名
				</view>
				<input class="right" v-model="formData.name" type="text" placeholder="请输入真实姓名">
			</view>
			<view class="card_item flex content-center">
				<view class="left">
					卡号
				</view>
				<input class="right" v-model="formData.bankCode" type="text" placeholder="请输入银行卡卡号">
			</view>
			<view class="card_item flex content-center">
				<view class="left">
					银行名称
				</view>
				<input class="right" v-model="formData.bankName" type="text" placeholder="请输入银行名称">
			</view>
			<view class="card_item flex content-center">
				<view class="left">
					手机号
				</view>
				<input class="right" maxlength="11" type="text" v-model="formData.bankMobile" placeholder="请输入银行预留手机号">
			</view>
		</view>
		<view class="qrbtn" @click="add">
			确认
		</view>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
	addCard
} from '@/api/merchant'
import { onLoad} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { isValidBankCard,validatePhoneNumber } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('添加银行卡')
const formData = ref({
	bankName:'',
	bankCode:'',
	name:'',
	bankMobile:'',
	shopId: merchartShop.value.id
})

const add = async() => {
	if(formData.value.name == ''){
		uni.showToast({
			title: '请输入真实姓名',
			icon: 'error'
		})
		return
	}

	if (!isValidBankCard(formData.value.bankCode)){
		uni.showToast({
			title: '请输入正确卡号',
			icon: 'error'
		})
		return
	}
	if(formData.value.bankName == ''){
		uni.showToast({
			title: '请输入银行卡名称',
			icon: 'error'
		})
		return
	}
	if (!validatePhoneNumber(formData.value.bankMobile)){
		uni.showToast({
			title: '请输入正确手机号',
			icon: 'error'
		})
		return
	}
	
	let res = await addCard(formData.value)
	if(res){
		uni.navigateBack()
	}
	
}
	
	
</script>

<style lang="scss">

	.title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		margin: 16rpx 0 0;
	}

	.card {
		padding: 0 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 40rpx 0 100rpx;

		.card_item {
			padding: 34rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #f5f5f5;

			.left {
				font-size: 28rpx;
				color: #333333;
				width: 140rpx;
			}

			.btn {
				width: 158rpx;
				height: 50rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				border: 2rpx solid #0CAFFE;
				font-size: 24rpx;
				color: #0CAFFE;
				text-align: center;
				line-height: 50rpx;
				margin-top: -10rpx;
				margin-left: 20rpx;
			}
		}
	}

	.qrbtn {
		width: 700rpx;
		height: 98rpx;
		background: linear-gradient(90deg, #52C2F9 0%, #00ABFF 100%);
		border-radius: 14rpx;
		text-align: center;
		line-height: 98rpx;

		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>
